
//播放页的下部

<template>
  <div class="bottom_block">
    <div class="music_list_block">
      <div class="title_box">
        <div class="img_box">
          <img src="../../assets/lists.png" alt="" />
        </div>
        <div class="text_box">歌曲列表</div>
      </div>
      <div class="list_box">
        <ul class="music_list_ul">
          <li class="list_head_box">
            <span>歌曲名</span>
            <span>专辑</span>
            <span>时长</span>
            <span></span>
          </li>
          <li class="music_list_li" v-for="(item, index) in list" :key="index">
            <span>{{ item.name }} </span>
            <span>{{ item.album }}</span>
            <span>{{ item.time }} </span>
            <span class="btn_box">
              <div class="play_btn" @click="playThis(index)">
                <img src="../../assets/play.png" />
              </div>
              <!-- <div class="collect_btn">
                <img src="../../assets/收藏.png" alt="" />
              </div> -->
            </span>
          </li>
        </ul>
      </div>
      <div class="page_apart_box">
        <div class="page_apart">
          <div class="page_up green" @click="prePage()">上一页</div>
          <div class="page_cont_box">
            <li
              v-for="(item, index) in pageList"
              :key="index"
              :class="{ choose: index + 1 == currentPage }"
              @click="thisPage(index + 1)"
            >
              {{ item }}
            </li>
          </div>
          <div class="page_down green" @click="nextPage()">下一页</div>
          <div class="page_last green" @click="lastPage()">尾页</div>
          <div class="page_search">
            <input
              type="text"
              placeholder="页码"
              v-model="pageValue"
              @keydown.enter="searchPage()"
            />
            <div class="search_btn" @click="searchPage()">
              <img src="../../assets/angle-right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comment_block">
      <div class="title_box">
        <div class="icon_box">
          <img src="../../assets/comment.png" alt="" />
        </div>
        <div class="text_box">歌曲评论</div>
      </div>
      <div class="comment_list_box">
        <li
          class="comment_list"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="left_box">
            <div class="buddha_box">
              <img src="../../assets/user.png" alt="" />
            </div>
            <div class="name_time_box">
              <span class="usr_name">{{ item.user }}:</span>
              <span>{{ item.create_time }}</span>
            </div>
            <div class="comment_content">
              {{ item.content }}
            </div>
          </div>
          <div class="right_box">
            <div class="tags_box">
              <img
                src="../../assets/tag.png"
                alt=""
                class="little_icon"
                @click="tagComment(index)"
              />
              <span class="tags_data data">
                {{ item.like }}
              </span>
            </div>
            <!-- <div class="comment_box">
              <img src="../../assets/评论2.png" alt="" class="little_icon" />
              <span class="comment_data data">
                {{ item.comment_data }}
              </span>
            </div> -->
          </div>
        </li>
      </div>
      <div class="comment_send">
        <div class="comment_head">评论</div>
        <textarea
          ref="comment"
          type="text"
          class="comment_input"
          placeholder="说出你的见解"
          v-model="myComment"
          @keydown.enter="sendComment()"
        />
        <div @click="sendComment()" class="send_btn">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottom_block",
  data() {
    return {
      pageCnt: 1, //总页数
      pageList: [], //渲染的页码列表
      //用于初始化分页器的初始列表
      lists: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24, 25, 26, 27, 28,
      ],
      currentPage: 1, //当前页码
      pageValue: "", //搜索页码值
      myComment: "", //我要发表的评论
    };
  },
  props: {
    list: Array,
    commentList: Array,
  },
  methods: {
    //播放当前点击的歌曲
    playThis(index) {
      this.$parent.currentSongId = this.$parent.music_list[index].id;
      this.$parent.currentSongIndex = index;
    },
    thisPage(index) {
      this.currentPage = index;
      this.$parent.pageGet(index, this.$parent.flag);
    },
    prePage() {
      if (this.currentPage != 1) {
        this.$parent.pageGet(--this.currentPage, this.$parent.flag);
      }
    },
    nextPage() {
      if (this.currentPage != this.$parent.pageCnt) {
        this.$parent.pageGet(++this.currentPage, this.$parent.flag);
      }
    },
    lastPage() {
      this.currentPage = this.$parent.pageCnt;
      this.$parent.pageGet(this.currentPage, this.$parent.flag);
    },
    searchPage() {
      if (
        this.pageValue != "" &&
        this.pageValue > 0 &&
        this.pageValue < this.$parent.pageCnt
      ) {
        this.currentPage = this.pageValue;
        this.$parent.pageGet(this.pageValue, this.$parent.flag);
      }
    },
    //发表评论
    sendComment() {
      if (sessionStorage.getItem("token")) {
        if (this.myComment != "") {
          let data = {
            tid: this.$parent.currentSongId,
            type: 1,
            content: this.myComment,
          };
          this.$http
            .post("/comment/", data, {
              headers: {
                Authorization:
                  "Bearer " + JSON.parse(sessionStorage.getItem("token")),
              },
            })
            .then(() => {
              let addObject = {
                content: this.myComment,
              };
              this.$parent.commentList.push(addObject);
            });
          this.myComment = "";
        }
      } else {
        alert("请先登录!");
      }
    },
    //评论点赞
    tagComment(index) {
      if (sessionStorage.getItem("token")) {
        this.$http
          .post("/comment/like/", {
            id: this.$parent.commentList[index].id,
          })
          .then((res) => {
            if (res.data.code == 20000) {
              this.$parent.commentList[index].like++;
            } else {
              alert(res.data.msg);
            }
          });
      } else {
        alert("请先登录!");
      }
    },
  },
  created() {
    let pageCnt = this.$parent.pageCnt;
    for (let i = 0; i < pageCnt; i++) {
      this.pageList[i] = this.lists[i];
    }
  },
  mounted() {
    for (let i = 0; i < this.list.length; i++) {
      if (this.$parent.currentSongId == this.list[i].id) {
        this.currentSong = i;
        this.$parent.currentSongIndex = i;
      }
    }
  },
};
</script>

<style scoped>
.bottom_block {
  width: 1314px;
  height: 1345px;
  background: #fff;
  box-shadow: 0px 2px 27px 0px rgba(0, 0, 0, 0.47);
  margin: 0 auto;
}
.music_list_block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1200px;
  height: 565px;
  margin: 0 auto;
  padding-top: 34px;
}
.music_list_block .img_box {
  width: 50px;
  height: 50px;
  background: #21262c;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.51);
  border-radius: 25px;
  text-align: center;
}
.music_list_block img {
  width: 25px;
  height: 28px;
  margin-top: 12px;
}
.title_box {
  display: flex;
  align-items: center;
}
.title_box div {
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.title_box div img {
  transform: translateY(-50px);
  filter: drop-shadow(#fff 0 50px);
}
.title_box .text_box {
  width: 104px;
  font-size: 24px;
  margin-left: 10px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #21262c;
  position: relative;
  z-index: 1;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.55);
  transform: translateY(5px);
}
.title_box .text_box::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 17px;
  width: 100px;
  height: 11px;
  background: #659274;
  border-radius: 5px;
  z-index: calc(-1);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.51);
}
.list_box {
  width: 1192px;
  height: 451px;
  border: 4px solid #21262c;
  border-radius: 10px;
  overflow: hidden;
}
.list_head_box {
  background: #ffffff;
  border-radius: 10px;
}

.music_list_ul .list_head_box span {
  font-weight: bold;
}
.music_list_ul li {
  display: flex;
  justify-content: space-around;
  width: 1192px;
  height: 50px;
}
.music_list_ul li span {
  width: 300px;
  text-align: center;
  line-height: 50px;
  font-family: Microsoft YaHei UI;
  color: #21262c;
  font-size: 18px;
  font-weight: 300;
}
.btn_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn_box div {
  margin-right: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}
.btn_box > div:hover {
  cursor: pointer;
  transform: scale(1.2);
}
.btn_box img {
  width: 19px;
  height: 19px;
}
.btn_box .play_btn {
  width: 30px;
  height: 30px;
  overflow: hidden;
}
.btn_box .play_btn:hover {
  cursor: pointer;
}
.btn_box .play_btn .current {
  transform: translateY(30px);
  filter: drop-shadow(#659274 0 -30px);
}
.music_list_ul li:nth-child(even) {
  background-color: #efefef;
}
.page_apart_box {
  display: flex;
  justify-content: center;
}
.page_apart {
  /* width: 500px; */
  display: flex;
  justify-content:center;
}
.page_cont_box {
  display: flex;
  align-items: center;
  margin: 0 20px;
}
.page_cont_box li {
  display: inline-block;
  color: #21262c;
  font-size: 18px;
  font-family: Impact;
  font-weight: 400;
  margin: 0 15px 0 0;
  width: 15px;
  /* transition: all 0.2s; */
}
.page_cont_box li:hover {
  cursor: pointer;
}
.green {
  width: 50px;
  height: 20px;
  background: #659274;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.58);
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  line-height: 20px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.55);
  text-align: center;
  margin: 0 10px;
}
.green:hover {
  cursor: pointer;
}
.page_search {
  display: flex;
  margin: 0 15px;
}
/* 当前页码的动态样式 */
.page_cont_box .choose {
  color: #659274;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  font-size: 21px;
}
input {
  width: 29px;
  height: 21px;
  padding: 0 7px;
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.26);
  border-radius: 5px;
}
input::-webkit-input-placeholder {
  font-size: 10px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #999999;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.09);
}
.search_btn {
  width: 20px;
  height: 20px;
  background: #659274;
  border-radius: 10px;
  margin-left: 10px;
  text-align: center;
  overflow: hidden;
}
.search_btn:hover {
  cursor: pointer;
}
.search_btn img {
  width: 19px;
  height: 13px;
  margin: 0;
  transform: translateY(-20px);
  filter: drop-shadow(#fff 0 20px);
}
.comment_block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1200px;
  height: 565px;
  margin: 0 auto;
  padding-top: 34px;
}
.icon_box {
  width: 50px;
  height: 50px;
  background: #21262c;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.51);
  border-radius: 25px;
  text-align: center;
}
.icon_box img {
  width: 29px;
  height: 30px;
  margin-top: 12px;
}
.comment_list_box {
  width: 100%;
  height: 328px;
  overflow: hidden;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
  overflow-y: scroll;
}
.comment_list_box::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}
.comment_list_box::-webkit-scrollbar-thumb {
  background-color: #ddd;
}
.comment_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
  background: #efefef;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.left_box {
  display: flex;
  justify-content: flex-start;
  margin-left: 5px;
  width: 1200px;
}
.buddha_box img {
  width: 64px;
  height: 64px;
}
.name_time_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin: 0 10px;
}
.name_time_box .usr_name {
  font-size: 16px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #21262c;
}
.comment_content {
  display: flex;
  align-items: center;
  width: 900px;
}
.right_box {
  display: flex;
  margin-right: 10px;
  width: 80px;
}
.right_box div {
  margin-left: 15px;
}
.right_box .data {
  font-size: 14px;
  font-family: Impact;
  font-weight: 400;
  color: #659274;
  margin-left: 5px;
}
.little_icon {
  width: 18px;
  height: 20px;
}
.comment_send {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 136px;
  position: relative;
}
.comment_input {
  width: 1176px;
  height: 58px;
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.71);
  border-radius: 10px;
  padding: 10px 10px;
  resize: none;
}

.comment_head {
  width: 38px;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #21262c;
  position: relative;
  z-index: 1;
}
.comment_head::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0px;
  width: 37px;
  height: 5px;
  background: #659274;
  border-radius: 2px;
  z-index: calc(-1);
}
.send_btn {
  position: absolute;
  bottom: -65px;
  right: 0;
  width: 71px;
  height: 35px;
  line-height: 35px;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.51);
  border-radius: 18px;
  text-align: center;
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.51);
}
.send_btn:hover {
  cursor: pointer;
}
.tags_box img {
  transition: all 0.3s;
}
.tags_box:hover img {
  transform: scale(1.1);
  cursor: pointer;
}
</style>